import React from 'react'
import { Database, Activity, TrendingUp, Grid } from 'lucide-react'
import { TopicStats } from '@/types/monitor'

interface TopicStatsTableProps {
  topicStats: TopicStats[]
  formatNumber: (num: number) => string
  topicRates?: Record<string, number> // Topic消息速率数据
  topicInfos?: any[] // Topic管理接口的数据，包含真实分区数
}

export default function TopicStatsTable({
  topicStats,
  formatNumber,
  topicRates = {},
  topicInfos = []
}: TopicStatsTableProps) {

  // 格式化消息速率
  const formatRate = (rate: number): string => {
    if (rate === 0) return '0'
    if (rate < 1) return rate.toFixed(2)
    if (rate < 100) return rate.toFixed(1)
    return Math.round(rate).toString()
  }

  // 获取Topic的真实分区数
  const getTopicPartitions = (topicName: string): number => {
    const topicInfo = topicInfos.find(info => info.name === topicName)
    return topicInfo?.partitions || 1 // 默认返回1，避免显示0
  }
  return (
    <div className="bg-white rounded-lg shadow-sm border">
      <div className="p-6 border-b">
        <div className="flex items-center space-x-2">
          <TrendingUp className="w-5 h-5 text-blue-500" />
          <h3 className="text-lg font-semibold">Topic性能监控</h3>
        </div>
        <p className="text-sm text-gray-600">实时Topic性能指标和使用情况</p>
      </div>
      <div className="p-6">
        {topicStats.length === 0 ? (
          <div className="text-center py-8">
            <Database className="w-12 h-12 text-gray-400 mx-auto mb-4" />
            <p className="text-gray-500">暂无Topic数据</p>
          </div>
        ) : (
          <div className="overflow-x-auto max-h-80 overflow-y-auto">
            <table className="w-full text-sm">
              <thead className="sticky top-0 bg-white">
                <tr className="border-b">
                  <th className="text-left py-3 px-2">
                    <div className="flex items-center space-x-1">
                      <Database className="w-4 h-4 text-gray-500" />
                      <span>Topic名称</span>
                    </div>
                  </th>
                  <th className="text-right py-3 px-2">
                    <div className="flex items-center justify-end space-x-1">
                      <Grid className="w-4 h-4 text-gray-500" />
                      <span>分区数</span>
                    </div>
                  </th>
                  <th className="text-right py-3 px-2">
                    <div className="flex items-center justify-end space-x-1">
                      <Activity className="w-4 h-4 text-gray-500" />
                      <span>消息速率</span>
                    </div>
                  </th>
                  <th className="text-right py-3 px-2">状态</th>
                </tr>
              </thead>
              <tbody>
                {topicStats.map((topic, index) => {
                  const messageCount = topic.latest_offset - topic.earliest_offset
                  const hasMessages = messageCount > 0
                  const messageRate = topicRates[topic.name] || 0
                  const partitionCount = getTopicPartitions(topic.name)

                  // 状态判断：基于消息速率和消息数量
                  let status = '空闲'
                  let statusColor = 'text-gray-500'
                  let statusBg = 'bg-gray-100'

                  if (messageRate > 0) {
                    status = '活跃'
                    statusColor = 'text-green-700'
                    statusBg = 'bg-green-100'
                  } else if (hasMessages) {
                    status = '有数据'
                    statusColor = 'text-blue-700'
                    statusBg = 'bg-blue-100'
                  }

                  return (
                    <tr key={topic.name} className={`${index % 2 === 0 ? 'bg-gray-50' : ''} hover:bg-gray-100 transition-colors`}>
                      <td className="py-3 px-2">
                        <div className="font-mono text-sm font-medium text-gray-900">
                          {topic.name}
                        </div>
                      </td>
                      <td className="text-right py-3 px-2">
                        <span className={`text-sm font-medium ${partitionCount > 1 ? 'text-blue-600' : 'text-gray-600'}`}>
                          {partitionCount}
                        </span>
                      </td>
                      <td className="text-right py-3 px-2">
                        <div className="flex items-center justify-end space-x-1">
                          <span className={`text-sm font-medium ${messageRate > 0 ? 'text-green-600' : 'text-gray-500'}`}>
                            {formatRate(messageRate)}
                          </span>
                          <span className="text-xs text-gray-400">msg/min</span>
                        </div>
                      </td>
                      <td className="text-right py-3 px-2">
                        <span className={`inline-flex items-center px-2 py-1 rounded-full text-xs font-medium ${statusColor} ${statusBg}`}>
                          {status}
                        </span>
                      </td>
                    </tr>
                  )
                })}
              </tbody>
            </table>
          </div>
        )}
      </div>
    </div>
  )
}
